---
title: Start developing
description: Make your first change to an Expo project and see it live on your device.
hideTOC: true
---

import { ProjectStructure } from '~/scenes/get-started/start-developing/ProjectStructure';
import { TemplateFeatures } from '~/scenes/get-started/start-developing/TemplateFeatures';
import { Collapsible } from '~/ui/components/Collapsible';
import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
import { Terminal, DiffBlock } from '~/ui/components/Snippet';
import { Step } from '~/ui/components/Step';

<Step label="1">
## Start a development server
To start the development server, run the following command:

<Terminal cmd={['$ npx expo start']} />

</Step>

<Step label="2">
## Open the app on your device

After running the command above, you will see a QR code in your terminal. Scan this QR code to open the app on your device.

If you're using an Android Emulator or iOS Simulator, you can press <kbd>a</kbd> or <kbd>i</kbd> respectively to open the app.

<Collapsible summary="Having problems?">

Make sure you are on the same Wi-Fi network on your computer and your device.

If it still doesn't work, it may be due to the router configuration &mdash; this is common for public networks. You can work around this by choosing the **Tunnel** connection type when starting the development server, then scanning the QR code again.

<Terminal cmd={['$ npx expo start --tunnel']} />

> Using the **Tunnel** connection type will make the app reloads considerably slower than on **LAN** or **Local**, so it's best to avoid tunnel when possible. You may want to install and use an emulator or simulator to speed up development if **Tunnel** is required to access your machine from another device on your network.

</Collapsible>

</Step>

<Step label="3">

## Make your first change

Open the **app/(tabs)/index.tsx** file in your code editor and make a change.

<DiffBlock
  raw={`diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index 45cfa0e..4d1b384 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -17,7 +17,7 @@ export default function HomeScreen() {
       }
     >
       <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
+        <ThemedText type="title">Hello World!</ThemedText>
         <HelloWave />
       </ThemedView>
       <ThemedView style={styles.stepContainer}>
  `}
/>

<Collapsible summary="Changes not showing up on your device?">

Expo Go is configured by default to automatically reload the app whenever a file is changed, but let's make sure to go over the steps to enable it in case somehow things aren't working.

- Make sure you have the [development mode enabled in Expo CLI](/workflow/development-mode#development-mode).
- Close the Expo app and reopen it.
- Once the app is open again, shake your device to reveal the developer menu. If you are using an emulator, press <kbd>Ctrl</kbd> + <kbd>M</kbd> for Android or <kbd>Cmd ⌘</kbd> + <kbd>D</kbd> for iOS.
- If you see **Enable Fast Refresh**, press it. If you see **Disable Fast Refresh**, dismiss the developer menu. Now try making another change.

  <ContentSpotlight
    alt="Developer menu in Expo Go app."
    src="/static/images/get-started/developer-menu.png"
    className="max-w-[540px]"
  />

</Collapsible>

</Step>

---

## File structure

Below, you can get familiar with the default project's file structure:

<ProjectStructure />

## Features

The default project template has the following features:

<TemplateFeatures />
